@charset "utf-8";
.nav-h{
  > ul{ background: none;
    > li{ float: left; width: 120px; text-align: center; height: 30px; line-height: 30px; border-bottom: 1px solid #fff; position: relative;z-index: 99;
      > a{ display: block; font-size: 16px; }
      &.active, &:hover{ border-color: #f60;
        > a{ color: #f60; }
      }
      &.has-child{ z-index: 100;
        &:before{
          display: inline-block; content: '\e69e'; position: absolute; right: 10px; top: 0; transition: all .5s; font-size: 16px; font-family: "iconfont"; transform: rotate(90deg);
        }
        &.hover{ border-color: #f60;
          > a{ color: #f60; }
          &:before{ transform: rotate(-90deg); }
        }
      }
    }
  }
  .child{ position: absolute; left: 0; top: 31px; background: #f8f8f8; width: 100%; animation: navSlideDown .5s; transform-origin: center top;
    li{
      a{ display: block; transition: all .5s;
        &:hover{ background: #57a3f3; color: #333 }
      }
      &.active{
        a{ background: #57a3f3; color: #333 }
      }
    }
  }
}
/*垂直方向样式*/
.nav-v{ border: 1px solid #dddee1; width: 180px; border-radius: 5px;
  > ul{
    > li{ line-height: 30px; position: relative;
      > a{ display: block; padding-left: 25px;
        &:hover{ background: #f7f7f7 }
      }
      &.has-child{
        > a:after{ content: '\e69e'; width: 20px; @include height(20px); position: absolute; right: 10px; top: 5px; transform: rotate(90deg); cursor: pointer; transition: all .5s; font-family: "iconfont"; font-size: 18px; }
      }
      &.active > a{ background: #f8f8f8 }
      &.hover{
        > a:after{ transform: rotate(-90deg) }
      }
    }
  }
  .child{ line-height: 25px;
    a{ padding-left: 30px; display: block; color: #999 }
    li{
      &.active{
        a{ background: #f8f8f8 }
      }
    }
  }
}
@keyframes navSlideDown{
  0%{ transform: scaleY(0); opacity: 0 }
  100%{ transform: scale(1); opacity: 1 }
}